import { Link } from 'react-static'
import { Button, Divider, Header, Icon, List, Message, Segment, Tab } from 'semantic-ui-react'

import CodeSnippet from 'docs/src/components/CodeSnippet'
import { semanticUIDocsURL, semanticUIRepoURL, semanticUICSSRepoURL } from 'docs/src/utils'

export const meta = {
  title: 'Get Started',
  nextPage: { title: 'Composition', href: '/augmentation' },
}

## Install

Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets.
Install the React components and choose a theme that suits your needs.

### Components

React components can be installed via <code>yarn</code>:

<CodeSnippet mode='bash' value={`yarn add ${props.pkg.name}`} fitted />

<Message info size='tiny' attached='bottom'>
  <Icon name='idea' />
  Themes from Semantic UI >=2.3.x require Semantic UI React >=0.81.0.
</Message>

If you are using TypeScript, you don't need to install anything, typings are included with the package.

### Theme

Choose a theme and delivery method that suits your needs:

<Tab
  menu={{ attached: 'top', secondary: true, pointing: true, color: 'teal' }}
  panes={[
    {
      menuItem: 'Default theme (CDN)',
      render: () => (
        <Tab.Pane style={{ fontSize: 'inherit' }}>
          <p>
            This is the quickest way to get started, just add this link to the{' '}
            <code>{'<head>'}</code> of your <code>index.html</code> file.
          </p>
          <CodeSnippet
            fitted
            label={false}
            mode='html'
            value={`
              <link
                rel="stylesheet"
                href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
              />
            `}
          />
        </Tab.Pane>
      ),
    },
    {
      menuItem: 'Default theme (NPM)',
      render: () => (
        <Tab.Pane style={{ fontSize: 'inherit' }}>
          <p>
            The <a href={semanticUICSSRepoURL}>Semantic UI CSS package</a> is automatically synced
            with the main Semantic UI repository to provide a lightweight CSS only version of
            Semantic UI.
          </p>
          <CodeSnippet mode='bash' value={'yarn add semantic-ui-css'} />
          <p>After install, import the minified CSS file in your app's entry file:</p>
          <CodeSnippet fitted label='index.js' value="import 'semantic-ui-css/semantic.min.css'" />
        </Tab.Pane>
      ),
    },
    {
      menuItem: 'Custom theme (NPM)',
      render: () => (
        <Tab.Pane style={{ fontSize: 'inherit' }}>
          Detailed documentation on Semantic UI theming is provided in our{' '}
          <Link to='/theming'>Theming guide</Link>.
        </Tab.Pane>
      ),
    },
  ]}
/>

<Divider hidden section />

## Bundling

Semantic UI React is fully supported by all modern JavaScript bundlers.

### Create React App

Semantic UI React is fully compatible with `create-react-app` and works out the box. Setup of custom theme is covered in [Theming guide](/theming).

### Webpack 4

Semantic UI React is fully supported by Webpack 4, including tree shaking as of `semantic-ui-react@0.81.2`.

Please ensure that you build your app in production mode before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.

<Divider hidden section />

## Examples

For examples on how to import and use Semantic UI React components, click the code icon
(<Icon name="code" />) next to any example. Here are a few direct links:

- [Button](/elements/button#button-example-button)
- [List](/elements/list#list-example-list)
- [Card](/views/card#card-example-card)
- [Modal](/modules/modal#modal-example-modal)
